<template>
  <div class="empty">
    <van-empty :image="imageType" :description="description">
      <van-button 
        v-if="showButton" 
        class="bottom-button"
        round 
        :type="buttonType" 
        @click="clickButton"
      >{{ buttonText }}</van-button>
    </van-empty>
  </div>
</template>

<script>
// 空状态
export default {
  name: "Empty",
  props: {
    imageType: { // 图片类型，可选值为 error network search，支持传入图片 URL
      type: String,
      default: 'network'
    },
    description: { // 图片下方的描述文字
      type: String,
      default: '数据加载失败'
    },
    showButton: { // 是否显示底部按钮
      type: Boolean,
      default: true
    },
    buttonText: { // 底部按钮文字
      type: String,
      default: '点击重试'
    },
    buttonType: { // 底部按钮颜色
      type: String,
      default: 'danger'
    }
  },
  methods: {
    clickButton() {
      this.$emit('tap')
    }
  },
};
</script>

<style lang="scss" scoped>
.empty {
  .bottom-button {
    width: 130px;
    height: 38px;
  }
}
</style>
